<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>分别设置四边边框</title>
        <style type="text/css">

            .wrapper {
                margin: 15px auto ;
                width: 400px ;
                height: 400px ;
                background-color: #f4f4f4;
            }

            .first {
                border-top-width: 10px ;
                border-top-style: solid ;
                border-top-color: blue ;
                border-bottom-width: 10px ;
                border-bottom-style: solid ;
                border-bottom-color: red ;
                border-left-width: 10px ;
                border-left-style: solid ;
                border-left-color: green ;
                border-right-width: 10px ;
                border-right-style: solid ;
                border-right-color: grey ;
            }

            .second {
                border-top: 10px solid blue ;
                border-bottom: 10px  solid red ;
                border-left: 10px solid green ;
                border-right: 10px solid grey ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

    </body>
</html>